<template>
	<view class="page">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">

		</view>
	
		<!-- #endif -->
		<view class="nav-bar">
			<view class="">
		
			</view>
			<view class="" @click="toxiaoxi">
				登录
			</view>
		</view>
		<view class="page-cencont">
			<view class="item">
				<view class="account" style="position: relative">
					<input type="text" placeholder-class="inp-palcehoder" v-model="userName" placeholder="输入姓名" />

				</view>
			</view>
			<view class="item">
				<view class="account" style="position: relative">
					<input type="text" data-type="imgCode" placeholder-class="inp-palcehoder" v-model="phone"
						placeholder="输入11位手机号" />

				</view>
			</view>
			<view class="item">
				<view class="account" style="position: relative">
					<input type="text" data-type="imgCode" placeholder-class="inp-palcehoder" v-model="imgCode"
						placeholder="请输入图片验证码" />

					<image @click="refreshsrc" class="codeimg" :src="srcs" mode="" />
				</view>
			</view>
			<view class="item">
				<view class="account" style="position: relative">
					<input type="text" data-type="imgCode" placeholder-class="inp-palcehoder" v-model="phonecode"
						placeholder="请输入手机验证码" />

					<button v-if="!disabled" size="mini" class="phonecode" @click="getPhonCode">获取验证码</button>
					<button v-if="disabled" class="phonecode2">{{ countdown }}秒后重新获取</button>
				</view>
			</view>

			<view class="item">
				<view class="account" style="position: relative">
					<input type="text" data-type="imgCode" placeholder-class="inp-palcehoder" v-model="passwd"
						placeholder="请设置登录密码" />
				</view>
			</view>
			<view class="item">
				<view class="account" style="position: relative">
					<input type="text" data-type="imgCode" placeholder-class="inp-palcehoder" v-model="refereesPhone"
						placeholder="请输入推荐码" />
				</view>
			</view>
			<view class="manual">
				<view>
					<radio class="radion" @click="checkedTap" color="#259AE8" value="r1" :checked="checked" />
					<text style="color: #83898e">我已阅读并同意</text>
					<text class="login-agree" @tap="toUserUsage">《注册协议》</text>
					<text class="login-agree" @tap="toPrivacy">《隐私协议》</text>
				</view>
			</view>
			<view class="confimr" @click="resetPassword">
				注册
			</view>
		</view>
	</view>
</template>

<script>
	const api = require('../../config/api');
	const util = require('../../utils/util');
	export default {
		data() {
			return {
				checked: false,
				srcs: '',
				//图片验证码src
				countdown: 60,
				// 初始倒计时时间，单位：秒
				disabled: false,
				// 按钮是否禁用
				// 表单数据
				phone: '',
				//手机号
				imgCode: '',
				phonecode: '',
				passwd: '',
				DeviceID: '',
				userName: '',
				refereesPhone: '',

			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.refreshsrc();
		},
		onShow() {
			this.refreshsrc();
		},

		methods: {
			toxiaoxi(){
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			// 去隐私协议
			toPrivacy() {
				uni.navigateTo({
					url: '/pages/Privacy/Privacy'
				});
			},

			// 去用户使用协议
			toUserUsage() {
				uni.navigateTo({
					url: '/pages/UserUsage/UserUsage'
				});
			},
			toUserUsage() {},
			toPrivacy() {},
			// 单选框
			checkedTap() {
				this.checked = !this.checked

			},
			async resetPassword() {
				function showErrorToast(message) {
					uni.showToast({
						title: message,
						icon: 'none'
					});
				}
				if (!this.userName.trim()) {
					showErrorToast('请输入姓名');
					return;
				}
				if (!this.phone.trim()) {
					showErrorToast('请输入手机号');
					return;
				}
				if (!/^[0-9]{11}$/.test(this.phone.trim())) {
					showErrorToast('手机号格式不对');
					return;
				}
				if (!this.imgCode.trim()) {
					showErrorToast('请输入图形码');
					return;
				}
				if (!this.phonecode.trim()) {
					showErrorToast('请输入手机验证码');
					return;
				}
				if (!this.passwd.trim()) {
					showErrorToast('请输入密码');
					return;
				}
				if (!this.checked) {
					showErrorToast('请同意隐私政策和注册协议');
					return;
				}
				const res = await util.request(
					api.registerAuthUrl, {
						"smsCode": this.phonecode,
						"passwd": this.passwd,
						"phone": this.phone,
						"tenantId": 3,
						"refereesPhone": this.refereesPhone,
						"userName": this.userName
					},
					'POST'
				);
				// console.log(res)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '注册成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						}, 1000);
					})
				}
			},

			// 获取图片验证码
			async refreshsrc() {
				const randomString = this.generateRandomString(6);
				this.DeviceID = randomString
				this.srcs = api.ImgCodeUrl + "?DeviceID=" + this.DeviceID;
			},

			// 生成字符串
			generateRandomString(length) {
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				for (let i = 0; i < length; i++) {
					const randomIndex = Math.floor(Math.random() * characters.length);
					result += characters.charAt(randomIndex);
				}
				return result;
			},
			async getPhonCode() {
				if (!this.imgCode.trim()) {
					uni.showToast({
						title: '请输入图形码',
						icon: 'none'
					});
					return;
				}
				if (!this.phone.trim()) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
					return;
				}
				const res = await util.request(
					api.PhoneCodeUrl, {
						"deviceID": this.DeviceID,
						"imgCode": this.imgCode,
						"phone": this.phone,
						"tenantId": 3
					},
					'POST'
				);
				// console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					});

					let countdown = this.countdown;

					this.disabled = true

					let timer = setInterval(() => {
						countdown--;


						this.countdown = countdown
						// 倒计时结束
						if (countdown <= 0) {
							clearInterval(timer);
							// 恢复按钮可点击状态
							this.countdown = 60,
								this.disabled = false
						}
					}, 1000);
				}
			}
		}
	};
</script>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	/* 单选框 */
	.manual {
		margin-top: 48rpx;
		font-size: 26rpx;
		margin-left: 24rpx;
	}

	.radion {
		align-self: center;
		margin-top: 0rpx;
	}

	radio .wx-radio-input {
		border-radius: 50%;
		width: 24rpx;
		border: 2rpx solid #5e5e5f;
		height: 24rpx;
	}

	.login-agree {
		color: #6699F2;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding: 1px;
	}

	.page-cencont {
		margin-top: 50px;
		margin-left: 25px;
		margin-right: 25px;
	}

	.item {
		height: 45px;
		margin-top: 15px;

	}

	.account {
		display: flex;
		border-bottom: 2px solid #E5E5E5;
		padding: 0px 15px;
		box-sizing: border-box;
		font-size: 14px;
		align-items: center;
	}

	.account input {
		// padding-left: 20rpx;
		// width: 80%;
		flex: 1;
	}

	/* 图片验证码 */
	.codeimg {
		width: 75px;
		height: 40px;
	}

	.inp-palcehoder {
		font-size: 26rpx;
	}

	/* 短信验证码 */
	.phonecode {
		height: 35px;
		border: 1px solid #6699F2;
		padding: 0px 10px;
		text-align: center;
		line-height: 35px;
		color: #6699F2;
		font-size: 15px;
	}

	.phonecode2 {
		height: 35px;
		border: 1px solid #6699F2;
		padding: 0px 10px;
		text-align: center;
		line-height: 35px;
		color: #767676;
		font-size: 15px;
	}

	.confimr {
		height: 45px;
		font-size: 20px;
		margin-top: 35px;
		background-color: #6A9FFB;
		text-align: center;
		color: #fff;
		line-height: 45px;
		border-radius: 30px;
	}

	.nav-bar {
		font-size: 16px;
		color: #6A9FFB;
		// font-weight: 600;
		padding: 5px 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
</style>